<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>进度条</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../resource/css/layui.css">
	<link rel="stylesheet" href="../resource/css/common.css">
</head>
<body>
	<div class="demoTable" style="font-size: 14px;">
		搜索ID：
		<div class="layui-inline">
			<input class="layui-input" name="id" id="demoReload" autocomplete="off">
		</div>
		<button class="layui-btn" data-type="reload">搜索</button>
		<button class="layui-btn" data-type="add">新增</button>
	</div>
	<table id="table1" class="canScroll" lay-filter="test"></table>
	<table id="table2" class="canScroll" lay-filter="test2"></table>

	<script type="text/html" id="sexCol">
		{{#  if(d.sex === '男'){ }} 
			1
		{{#  } else { }}
			0
		{{#  } }}
	</script>
	<script type="text/html" id="barDemo">
		{{#  if(d.sex === '男'){ }} 
			<a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>
			<a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
		{{#  } else { }}
			
		{{#  } }}
	</script>
	<script src="../resource/layui.js"></script>
	<script type="text/javascript">
		layui.use(['table', 'form'], function(){
			var table 	= layui.table;
			var $ 		= layui.$ || parent.window.mod.jquery;
			var form 	= layui.form;

			var table_cols = [						// 表头
				  	// {title : '序号',type:'numbers',Width: 20},
					{checkbox: true}
					,{field: 'id', title: 'ID', width:80, sort: true, unresize: true}
				    ,{field: 'userName', title: '用户名111', width:80, unresize: true}
				    ,{field: 'sex', title: '性别', width:80, sort: true, unresize: true, templet: '#sexCol'}
				    ,{field: 'city', title: '城市', width:80, unresize: true} 
				    ,{field: 'sign', title: '签名', width: 177, unresize: true, edit: true}
				    ,{field: 'experience', title: '积分', width: 80, sort: true, unresize: true}
				    ,{field: 'score', title: '评分', width: 80, sort: true, unresize: true}
				    ,{field: 'classify', title: '职业', width: 80, unresize: true}
				    ,{field: 'wealth', title: '财富', width: 135, sort: true, unresize: true, }
				    ,{field: 'btn', title: '操作', width:300,toolbar:"#barDemo", unresize: true}
				];
			table.render({
				elem: $('#table2'),				// 表格元素
				id: 'table2',
				url	: '../resource/data/table1.json',		// 请求路径
				page: true,						// 是否开启分页
				limit: 10,						// 默认一页显示个数
				limits: [10,20,30],				// 每页显示个数的可选值
				loading: true,					// 切换 是否 显示loading
  				even: true,						// 开启隔行背景
				method: 'get',					// 请求类型 默认get
  				where: {						// 请求的其他参数(除开page和limit)
  					// token: 'sasasas',
  					// id: 10001
				  },
				select: 'single',
				cols: [table_cols],
				done: function(res, curr, count){// 加载完table后执行的方法 res：返回数据 curr：当前页码 count：一页显示个数
					parent.window.resizeIframe(window.frameElement,document.getElementsByTagName('html')[0]);
					parent.window.tableHeaderFixed($, this.elem, 0, true);
				}
			});

			table.on('checkbox(test2)', function(obj){
				active['getCheckData'] ? active['getCheckData'].call(this) : '';
			});

			table.on('tool(test2)', function(obj){
				var data = obj.data;
				if(obj.event === 'detail'){
					layer.msg('ID：'+ data.id + ' 的查看操作');
				} else if(obj.event === 'del'){
					layer.confirm('真的删除行么', function(index){
						obj.del();
						layer.close(index);
					});
				} else if(obj.event === 'edit'){
					layer.alert('编辑行：<br>'+ JSON.stringify(data))
				}
			});

			var dataCache = [];
			active = {
				reload: function(){
					var demoReload = $('#demoReload');
					//执行重载
					table.reload('table2', {
						page: {
							curr: 1 //重新从第 1 页开始
						}
						,where: {
							id: demoReload.val()
						}
					});
				},
				getCheckData: function(){ //获取选中数据
					var checkStatus = table.checkStatus('table2'),
						data 		= checkStatus.data;
					var realData = parent.window.diffArr(data, dataCache);	// 取最后次点击得到的数据
					dataCache = data;
					console.log(realData);
				}
				,getCheckLength: function(){ //获取选中数目
					var checkStatus = table.checkStatus('table2'),data = checkStatus.data;
					layer.msg('选中了：'+ data.length + ' 个');
				}
				,isAll: function(){ //验证是否全选
					var checkStatus = table.checkStatus('table2');
					layer.msg(checkStatus.isAll ? '全选': '未全选')
				}
				,add: function() {
					var arrInputs = [
						//表头名(field),显示名(title),表单类型(type),显示形式(display),验证条件(verify),提示文字(placeholder),默认初始值(value),请求路径(url),请求参数(data),固定选项(options),宽度(width),id(id属性值),readonly(只读属性，select元素无效)，rule(转换规则)
						{'field': 'userName', 'title': '名字', 'type': 'input-text', 'display': 'inline', 'verify': 'required', 'placeholder': '请输入名字', 'value': '默认值', 'width': '150px', 'readonly': true}
						,{'field': 'userName', 'title': '名字', 'type': 'input-text', 'display': 'inline', 'verify': 'required', 'placeholder': '请输入名字', 'value': '', 'width': '150px'}
						,{'field': 'sex', 'title': '描述', 'type': 'textarea', 'display': 'block', 'verify': 'required', 'placeholder': '填写描述', 'value': '', 'width': '300px'}
						,{'field': 'city', 'title': '城市', 'type': 'select', 'display': 'block', 'verify': 'required', 'placeholder': '选择城市', 'value': '', 'url': '', 'data': {}, 'options': ['陕西','甘肃'], 'id': 'selectCity', 'readonly': true}
						,{'field': 'city2', 'title': '城市', 'type': 'select', 'display': 'block', 'verify': 'required', 'placeholder': '选择城市', 'value': '1', 'url': '', 'data': {}, 'options': ['0','1'], 'id': 'selectCity2', 'readonly': true, rule: {0:'女', 1:'男'} }
					];
					parent.window.layerOpenParams(
						$, layer, arrInputs, 'addInforation', subSure, form
						, function(){$("#selectCity2").next().width('150px')}
					);
					form.render();
					$("#selectCity2").next().width('150px');	// select只能单独提出来写样式
				}
			};
			
			// 按钮查询 新增
			$('.demoTable .layui-btn').on('click', function(){
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

		});
		function subSure(formId, index, $) {
			alert(formId+''+index);
		}
	</script>
</body>
</html>